<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>更换头像</title>
  <link media="all" rel="stylesheet" th:href="@{/css/files.css}"/>
  <link media="all" rel="stylesheet" th:href="@{/lib/cropper/cropper.css}"/>
</head>
<body>
<!-- 第一行的图片裁剪和预览区域 -->
<div class="row1" style="width: 60%;" >
  <!-- 图片裁剪区域 -->
  <div class="cropper-box">
    <img id="image" name="imgPath" th:src="${session.user.imgPath}" alt="待裁剪图片"
         th:data-default-src="'/images/default.jpeg'"
         onerror="this.src=this.dataset.defaultSrc">>
  </div>
  <!-- 图片的预览区域 -->
  <div class="preview-box">
    <div>
      <div class="img-preview w100"></div>
      <p class="size">100 x 100</p>
    </div>
    <div>
      <div class="img-preview w50"></div>
      <p class="size">50 x 50</p>
    </div>
  </div>
</div>
<!--第二行的按钮区域-->
<div class="row2">
  <input type="file" hidden accept="image/jpg,image/jpeg,image/png" id="files">
  <button type="button" class="layui-btn" id="btnUpdate">上传</button>
  <button type="button" class="layui-btn layui-btn-danger" id="uploadSuccess">确定</button>
</div>

<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/lib/jquery.js}"></script>
<script th:src="@{/lib/cropper/Cropper.js}"></script>
<script th:src="@{/lib/cropper/jquery-cropper.js}"></script>

<script>
  layui.use(['layer', 'jquery'], function() {
    var $ = layui.jquery;
    var layer = layui.layer;

    // 获取URL参数
    function getQueryParams() {
      var params = new URLSearchParams(window.location.search);
      return {
        userId: params.get('id')
      };
    }

    // 初始化裁剪器
    var $image = $('#image');
    var cropper;

    // 初始化裁剪器
    function initCropper() {
      $image.cropper({
        aspectRatio: 1,
        viewMode: 1,
        preview: '.img-preview',
        crop: function(e) {
          // 实时预览逻辑
        }
      });
    }

    // 选择图片
    $('#btnUpdate').click(function () {
      $('#files').click();
    });

    // 文件选择
    $('#files').change(function (e) {
      var file = e.target.files[0];
      if (file) {
        // 文件类型验证
        if (!file.type.match(/image\/(jpeg|jpg|png)/)) {
          layer.msg('请选择有效的图片文件');
          return;
        }
        // 文件大小验证
        if (file.size > 1024 * 1024) {
          layer.msg('图片大小不能超过1MB');
          return;
        }
        var reader = new FileReader();
        reader.onload = function (e) {
          $image
                  .cropper('destroy') // 销毁旧裁剪区域
                  .attr('src', e.target.result) // 设置新图片
                  .cropper({ // 重新初始化裁剪器
                    aspectRatio: 1,
                    viewMode: 1,
                    preview: '.img-preview',
                    crop: function(e) {
                      // 实时预览逻辑
                    }
                  });
        };
        reader.readAsDataURL(file);
      }
    });

    // 确定裁剪
    $('#uploadSuccess').click(function () {
      $image.cropper('getCroppedCanvas', {
        width: 100,
        height: 100
      }).toBlob(function (blob) {
        if (!blob) return;

        // 上传到服务器
        var formData = new FormData();
        formData.append('file', blob);

        $.ajax({
          url: '/file/uploadByUser',
          type: 'POST',
          data: formData,
          contentType: false,
          processData: false,
          beforeSend: function () {
            layer.load(2);
          },
          success: function (res) {
            layer.closeAll('loading');
            if (res.code === 0) {
              // 通知父窗口更新头像
              window.opener.postMessage({
                type: 'avatarUpdate',
                path: res.path
              }, '*');

              // 关闭当前窗口
              window.close();
            } else {
              layer.msg('上传失败：' + res.message);
            }
          },
          error: function () {
            layer.closeAll('loading');
            layer.msg('请求出错，请稍后重试！');
          }
        });
      });
    });

    // 初始化裁剪器
    initCropper();
  });
</script>
</body>
</html>